import {StyleSheet} from 'react-native'
import {autoSize} from "./common";
import {NAVBAR_HEIFHT, SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant";
import Colors from "./Colors";


export const archiveProps = {
    navProps: {
        // statusBar: {style: 'light-content'}
    }
};
export const archiveStyles = StyleSheet.create({
    navBar: {
        height: NAVBAR_HEIFHT,
        width: SCREEN_WIDTH,
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 100,
        backgroundColor: '#000',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    navBarTitle: {
        marginTop: 10,
        color: '#fff'
    },

    nextStep: {
        position: 'absolute',
        top: NAVBAR_HEIFHT * 0.35,
        right: 20,
    },
    back: {
        position: 'absolute',
        top: NAVBAR_HEIFHT * 0.4,
        left: 20,
    },
    block: {
        width: SCREEN_WIDTH,
        height: 100,
        backgroundColor: '#f00'
    },
    container: {
        position: 'relative'
    },
    scrollViewContentView: {
        height: SCREEN_HEIGHT,
        display: 'flex',
        flex: 1,
        position: 'absolute',
        left: 0,
        top: 0,
        zIndex: -1

    },
    headerView: {
        width: SCREEN_WIDTH,
        height: autoSize(297),
        backgroundColor: 'rgb(233,123,36)',
        paddingTop: NAVBAR_HEIFHT,
        position: 'relative',
        display:'flex',
        justifyContent:'center',
        alignItems:'flex-end'
    },
    avatarContainer: {
        position: 'absolute',
        bottom: 10,
        left: SCREEN_WIDTH * 0.5 - autoSize(85),
        zIndex: 2
    },
    avatar: {
        width: autoSize(170),
        height: autoSize(170),
        borderWidth: 5,
        borderColor: '#fff',
        borderRadius: autoSize(85),
        display: 'flex',
        flex: 1,
        backgroundColor:'#E0E0E0',
        justifyContent:'center',
        alignItems:'center',
    },
    avatarImage:{
        width: autoSize(170),
        height: autoSize(170),
        borderRadius: autoSize(85),
        borderWidth: 5,
        borderColor: '#fff',
    },
    headerBottom: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        backgroundColor: '#fff',
        height: autoSize(91),
        width: SCREEN_WIDTH,
        zIndex: 1
    },
});

export const areaPickStyles = StyleSheet.create({
   container:{
       backgroundColor:'#232728'
   }
});

export const focusStyles = StyleSheet.create({
    listItem:{
        height:autoSize(140),
        flexDirection:'row',
        display:'flex',
        alignItems:'center',
        justifyContent:'space-between',
        backgroundColor:'#fff',
        paddingHorizontal:autoSize(15)
    } ,

    listItemNameText:{
       color:'#333',
        fontSize:15,
        marginBottom:5,
        marginLeft:10,
    },
    listItemAddressText:{
        color:'#666',
        fontSize:13 ,
        marginLeft:10,
    },
    listItemFocusStatus:{
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        width:autoSize(40),
        height:autoSize(40),
        borderRadius:autoSize(20),
        borderWidth:2 ,
        borderColor:Colors.Active
    },
    listItemUnFocusStatus:{
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        width:autoSize(40),
        height:autoSize(40),
        borderRadius:autoSize(20),
        borderWidth:2 ,
        borderColor:'#ccc'
    },
    container:{

    }
});